﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Aplication</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            var testUrl = "http://localhost:46732/AnnotService.svc/GetAnnotations";
            var testPostUrl = "http://localhost/addon/TestService.svc/testPost";
            var testDeleteUrl = "http://localhost:46732/AnnotService.svc/DeleteAnnotations";

            $("#btnGetTest").click(function () {

                $.ajax({
                    type: "GET",
                    url: testUrl,
                    success: function (response) {
                        $("#result").html("");
                        var content = "";
                        $.each(response, function (i, response) {
                            content += '<div>' + response.Id + ' ' + response.TagId + '</div>';
                            content += '<div>' + response.Url + '</div>';
                            content += '<div>' + response.Content + '</div>';
                            content += '<div>' + response.Comment + '</div>';
                            content += '<br />';
                        });
                        $(content).appendTo("#result");
                        //$("#result").html(content);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            });


            $("#btnPostTest").click(function () {

                var jObject = new Object();
                jObject.id = $("#txtBox").val();

                $.ajax({
                    type: "POST",
                    data: JSON.stringify(jObject),
                    contentType: "application/json",
                    dataType: "json",
                    url: testPostUrl,
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            });


            $("#btnDeleteTest").click(function () {

                $.ajax({
                    type: "DELETE",
                    url: testDeleteUrl + "/" + $("#txtBoxDelete").val(),
                    //data: "{}",
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            });


        });
    </script>
</head>
<body>

    <table style="width: 100%;">
        <tr>
            <td>
               Test Get 
            </td>
            <td>
                
            </td>
            <td>
                <input id="btnGetTest" type="button" value="Test 1: GET" />
            </td>
        </tr>
        <tr>
            <td>
               Test Post 
            </td>
            <td>
                <input id="txtBox" type="text" />
            </td>
            <td>
                <input id="btnPostTest" type="button" value="Test 2: POST" />
            </td>
        </tr>
        <tr>
            <td>
                Test Delete 
            </td>
            <td>
                <input id="txtBoxDelete" type="text" />
            </td>
            <td>
                <input id="btnDeleteTest" type="button" value="Test 3: DELETE" />
            </td>
        </tr>
    </table>

    <div id="result"></div>
</body>
</html>
